/**
 * Margin
 */

@mixin margin-top($number) {
    margin-top: #{ $number * $typographic-leading + "px"};
}

@mixin margin-bottom($number) {
    margin-bottom: #{ $number * $typographic-leading + "px"};
}

@mixin margin-right($number) {
    margin-right: #{ $number * $typographic-leading + "px"};
}

@mixin margin-left($number) {
    margin-left: #{ $number * $typographic-leading + "px"};
}

@mixin margin($top, $right, $bottom:null, $left:null) {
    @if $left==null and $bottom==null {
        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
    }

    @else if $left==null or $left==$right {
        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
    }

    @else {
        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
    }
}
